<template>
    <div class="bg">
       <div class="top_card" @click="skiptoprofile">
           <img class="headimg" src="../../../static/images/me/headimg.png">
           <div class="card_name">小李</div>
           <div class="card_id">系统号：123456</div>
           <img  class="icon_code" src="../../../static/images/me/code.png" alt="">
           <!-- <img  class="icon_more" src="../../../static/images/me/more.jpg" alt=""> -->
           <van-icon name="arrow"  class="icon_more" size="20"/>
            <!-- <div class="icon_more"></div> -->
       </div>
      <!-- <div v-for="(item,index) in list" :key="index"> 
       <div class="list "  :class="{margin_bo_10:index == 0||index==3}" @click="btnEvent(item.path)">
           <div class="list_lift">
               <img class="list_icon" :src="item.iconUrl" alt="">
               <div class="list_title">{{item.title}}</div>
           </div>
           <img  class="list_more" src="../../../static/images/me/more.jpg" alt="">
       </div>
       <div class="line"></div>
      </div> -->
      
       <div class="list margin_bo_10"   @click="btnEvent('/sharelife')">
           <div class="list_lift">
               <img class="list_icon" src="../../../static/images/me/share.png" alt="">
               <div class="list_title">朋友圈</div>
           </div>
           <img  class="list_more" src="../../../static/images/me/more.jpg" alt="">
       </div>
       <div class="line"></div>
      
        <div class="list "   @click="btnEvent('/nearby')">
           <div class="list_lift">
               <img class="list_icon" src="../../../static/images/me/nearby.png" alt="">
               <div class="list_title">附近的人</div>
           </div>
           <img  class="list_more" src="../../../static/images/me/more.jpg" alt="">
       </div>
       <div class="line"></div>

         <div class="list "   @click="btnEvent('/becomevip')">
           <div class="list_lift">
               <img class="list_icon" src="../../../static/images/me/vip.png" alt="">
               <div class="list_title">成为VIP</div>
           </div>
           <img  class="list_more" src="../../../static/images/me/more.jpg" alt="">
       </div>
       <div class="line"></div>

         <div class="list margin_bo_10"   @click="btnEvent('/shoucang')">
           <div class="list_lift">
               <img class="list_icon" src="../../../static/images/me/collection.png" alt="">
               <div class="list_title">收藏</div>
           </div>
           <img  class="list_more" src="../../../static/images/me/more.jpg" alt="">
       </div>
       <div class="line"></div>

        <div class="list "   @click="btnEvent('/set')">
           <div class="list_lift">
               <img class="list_icon" src="../../../static/images/me/set.png" alt="">
               <div class="list_title">设置</div>
           </div>
           <img  class="list_more" src="../../../static/images/me/more.jpg" alt="">
       </div>
       <div class="line"></div>
    </div>

</template>
<script type="text/javascript">
export default {
    data(){
        return{
            list:[
            {iconUrl:"../../../static/images/me/share.png",title:'朋友圈',path:'/sharelife'},
            {iconUrl:"../../../static/images/me/nearby.png",title:'附近的人',path:'/nearby'},
            {iconUrl:"../../../static/images/me/vip.png",title:'成为VIP',path:'/becomevip'},
            {iconUrl:"../../../static/images/me/collection.png",title:'收藏',path:'/shoucang'},
            {iconUrl:"../../../static/images/me/set.png",title:'设置',path:'/set'}
            ],
            
        }

    },
    created(){
       
    },
    methods:{
        // 跳转个人资料
        skiptoprofile(){
            this.$router.push({
                path:'/profile'
            })
        },
        btnEvent(path){
            this.$router.push({
                path:path
            })
        }
    }
}
</script>
<style   scoped>

.bg{
    background: #EEEEEE;
    width: 100vw;
    height: 100vh;
}
.top_card{
    position: relative;
    height: 180px;
    background: #4AC7D7;
    color: #fff;
    margin-bottom: 20px ;
}
.headimg{
   position: absolute;
   left: 20px;
   top: 50px;
    height: 80px;
    width: 80px;
}
.card_name{
 position: absolute;
 left: 120px;
 top: 60px;
 width: 200px;
 height: 30px;
 line-height: 30px;
 font-size: 20px;
 white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.card_id{
 position: absolute;
 font-size: 14px;
 left: 120px;
 top: 90px;
 width: 150px;
 height: 30px;
 line-height: 30px;
 /* color: #7F7F7F; */
}
.icon_code{
 position: absolute;
 right: 50px;
 top: 95px;
 width: 20px;
 height: 20px; 
}
.icon_more{
 position: absolute;
 right: 20px;
 top: 95px;
 width: 20px;
 height: 20px;
}
.list{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    background: #ffffff;
    padding: 0 20px ;
    /* border-bottom: 1px solid #e3e4e5; */
}
/* .line{
position: absolute;
right: 0;
bottom: -1px;
width: 88%;
height: 1px ;
z-index: 2;
background: #e3e4e5;
} */
.line{
    padding-left: 50px;
    height: 1px ;
    background: #e3e4e5;
}
.list_lift{
     display: flex;
    justify-content: space-between;
    align-items: center;
}
.list_icon{
    width: 20px;
    height: 20px;
}
.list_title{
    margin-left: 10px;
    display: flex;
}
.list_more{
     width: 15px;
    height: 15px;
}
.margin_bo_10{
    margin-bottom: 10px;
}
</style>